<template>
  <div>
    <!-- <div v-bind:class={active:isActive}>123</div> -->

    <!-- <div v-bind:class=[msg,name]>123</div> -->

    <!-- <div v-bind:class=[isActive?msg:name]>123</div> -->

    <!-- <div v-bind:style="styleObject">style</div> -->

    <!-- <div v-bind:style="[bgcStyle,colorStyle]">style数组</div> -->

    <!-- <input type="radio" name="gender" value="男" v-model="rdoGd" />男
    <input type="radio" name="gender" value="女" v-model="rdoGd" />
    女---
    {{ rdoGd }}
    <br />

    <input type="checkbox" v-model="checked" />
    {{ checked }}
    <br />

    <input type="checkbox" value="篮球" v-model="checkedNames" />
    <input type="checkbox" value="足球" v-model="checkedNames" />
    <input type="checkbox" value="跑步" v-model="checkedNames" />
    {{ checkedNames }}-->

    <!-- 传入静态prop -->
    <!-- <Topic plan="planA" theName="qwdwas" /> -->
    <!-- 传入动态prop -->
    <!-- <Topic :plan="plan" :theName="theName" @autoclick="aaa" />
    <br>
    {{one}}--{{two}}-->

    <!-- prop验证 -->
    <Topic :names="nameObj.name" />
  </div>
</template>

<script>
import Topic from "./Topic";
// 组件里面的选项对象  --> 构造器
export default {
  // 定义当前组件的状态
  data() {
    return {
      // plan: "planA",
      // theName: "asddfasdf",
      // one: "1",
      // two: "2",
      nameObj: {
        name: "thisName",
      },
      // rdoGd: "",
      // isActive: true,
      // checked: false,
      // checkedNames: [],
      // msg: "qwert",
      // name: "tyui",
      // bgcStyle: { background: "yellow" },
      // colorStyle: { color: "blue" },
      // styleObject: {
      // color: "red",
      // fontSize: "26px"
      // }
    };
  },
  components: {
    Topic,
  },
  methods: {
    aaa(one, two) {
      console.log(one, two);
      this.one = one;
      this.two = two;
    },
  },
};
</script>

<style>
</style>
